<template>
    <div style="height: 100%;width: 100%">
        <div style="width: 100%">
            <span  class="font-style" >最新影资</span>
        </div>
        <el-divider></el-divider>
        <div style="width: 100%">
            <el-row>
                <el-col :span="12" v-for="blog in blogs" :key="blog.id" style="padding :5px 5px 10px 15px;border-bottom: 1px dashed #e2e2e2;">
                    <div style="width: 100%;height: 25px">
                        <el-link type="info" style="color: #606266;font-size: 16px;" @click="toBlogView(blog.id)" >{{blog.title}}</el-link>
                    </div>
                    <el-row style="width: 100%;height: 25px;margin:  5px 0">
                        <el-col :span="9" style="height: 100%;">
                            <i class="el-icon-paperclip" style="color: rgba(66, 217, 125, 0.74)"></i>
                            <div v-for="(label,index) in blog.labels" :key="index" style="display: inline-block">
                                <span v-if="index==0" style="margin-right: 5px;font-size: 15px">
                                    {{label.content}}
                                </span>
                                <span v-if="index==1" style="margin-right: 5px;font-size: 15px">
                                    ,{{label.content}}
                                </span>
                                <span v-else-if="index==2" style="margin-right: 5px;font-size: 15px">
                                    ,{{label.content}}
                                </span>
                                <span v-else-if="index==3" >
                                    ...
                                </span>

                            </div>
                        </el-col>
                        <el-col :span="8">
<!--                            点赞数-->
                            <i class="el-icon-thumb iconStyle" ></i>
                            <span class="marginLR">{{blog.likeCount}}</span>
<!--                            收藏数-->
                            <i class="el-icon-star-off iconStyle" ></i>
                            <span class="marginLR">{{blog.collectionCount}}</span>
<!--                            点击数-->
                            <i class="el-icon-view iconStyle" ></i>
                            <span class="marginLR">{{blog.hitsNum}}</span>
                        </el-col>
                        <el-col :span="7">
<!--                            更新时间-->
                            <i class="el-icon-time iconStyle" ></i>
                            <span class="marginL">{{blog.updateTime | dateFormatFun(1)}}</span>
                        </el-col>

                    </el-row>

                </el-col>

            </el-row>

        </div>
    </div>
</template>

<script>
    export default {
        name: "NewBlogList",
        data(){
            return{
                blogs:[],//需要展示的blog
            }
        },
        created() {
            this.getBlogs(8);
        },
        methods:{
            //查询所有的博客
            getBlogs(num){
                this.request.get("/index/blog/queryAllBlogs",{
                    params:{
                        orderByUpdateTime:true,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        for (let i = 0; i < num; i++) {
                            if (res.data.blogs[i].labels.length>2){
                                res.data.blogs[i].labels = res.data.blogs[i].labels.slice(0,4);
                            }
                            this.blogs.push(res.data.blogs[i]);
                        }
                    }
                })
            },
            //跳转到查看博客界面
            toBlogView(id){
                this.$router.push({
                    path: '/frontFramework/blogView',
                    query: {
                        id: id,
                    }
                })
            },
        }
    }
</script>

<style scoped>

    .iconStyle{
        color: rgba(38, 49, 42, 0.43)
    }

</style>